<template>
  <div class="panel" v-if="min">
    <template v-for="session in sessions">
      <div class="user-item" @click="choose(session.user.group+':'+session.user.id)">
        <Badge :count="session.badge">
          <img class="user-photo" :src="session.user.img" :alt="session.user.name">
        </Badge>
        <h4 class="user-name">{{session.user.name}}</h4>
      </div>
    </template>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    name: 'chat-content',
    data () {
      return {
        websocket: null,
        token: '',
        min: false
      }
    },
    computed: {
      // 使用对象展开运算符将 getters 混入 computed 对象中
      ...mapGetters({
        show: 'GET_WINDOW_STATUS',
        sessions: 'GET_SESSIONS'
      })
    },
    methods: {
      choose (session) {
        this.$store.commit('SHOW_WINDOW', session)
      }
    }
  }
</script>

<style scoped lang="less">
  .panel {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #e2e2e2;
    border-radius: 3px;
    .user-item {
      position: relative;
      height: 70px;
      width: 200px;
      padding: 5px;
      border-bottom: 1px solid #ccc;
      cursor: pointer;
      & > * {
        position: absolute;
      }
      .user-photo {
        width: 60px;
        height: 60px;
        top: 5px;
      }
      .user-name {
        left: 80px;
        top: 5px;
      }
      &:hover {
        background-color: #39f;
      }
    }
  }

</style>
